
function init() {
	createSlider();
	createMap();
	
}

var slider;
var map;

var markersArray = [];


function createMap(){

    var latlng = new google.maps.LatLng ((north+south)/2,(east+west)/2);

    var myOptions = { zoom: zoom,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.TERRAIN
                    };
	
	
    map = new google.maps.Map(document.getElementById("map"), myOptions); 
	
	loadOverlay(dir+"200/",100);
	
	
	
	//var imageBounds = new google.maps.LatLngBounds(new google.maps.LatLng(south,west),new google.maps.LatLng(north,east));
	//shadeBackground = new ProjectedOverlay(map,'shade.png', imageBounds, {percentOpacity:70}) ;
	
	
	var bikeLayer = new google.maps.BicyclingLayer();
	bikeLayer.setMap(map);
	
	google.maps.event.addListener(map, 'zoom_changed', function() {
    	changeZoom(map.getZoom());
  	});
	
	setUsersTracksData();
}


function changeZoom(z) {
	if(z>13)
		loadOverlay(dir+"100/",90);
	if(z==12 || z==13)
		loadOverlay(dir+"200/",90);
	if(z==11)
		loadOverlay(dir+"200/",90);
	if(z==10)
		loadOverlay(dir+"300/",60);
	if(z==9)
		loadOverlay(dir+"300/",40);
	if(z<9) {
		var xy = map.getCenter();
		window.location = "index.jsp?lat="+xy.lat()+"&lng="+xy.lng()+"&zoom="+z+"&activity="+activity+"&city="+city+"&countryName="+countryName;
		
	}
}

function loadOverlay(dirz, opacity) {

	var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(south,west),
    new google.maps.LatLng(north,east));
	
	if(markersArray.length > 1) {
		for (i=0; i<4;i++) {
			markersArray[i].setMap(null);
		}
	}
	
	for(i=0; i<4;i++) {
		var file = dirz+i+".png"
		markersArray[i] = new ProjectedOverlay(map, file, imageBounds, {percentOpacity:opacity}) ;
		markersArray[i].setMap(null);
	}
	
	markersArray[slider.value].setMap(map);
}


function createSlider() {
  slider = new Control.Slider('handle','track', {
	range: $R(0,3), values: $R(0,3),
	onSlide: function(value) {update(value);},
	onChange: function(value) {update(value);}
  });
  
}

function update(value) {

	document.getElementById("hour").value = value;
	
	for (i=0; i<4;i++) {
		markersArray[i].setMap(null);
	}
	markersArray[value].setMap(map);
	setUsersTracksData();
}

function enterTime() {
	var hour = document.getElementById("hour").value;
	slider.setValue(hour);
}

var c;
var t;
var timer_is_on=0;

function run() {
	var state = document.getElementById("run").value;
	if(state == "start") {
		document.getElementById("run").value = "stop";
		slider.setDisabled();
		document.getElementById("hour").disabled = true;
		
		if (!timer_is_on) {
			c = slider.value;
			timer_is_on=1;
			timedCount();
		}	
	}
	else {
		slider.setEnabled();
		document.getElementById("hour").disabled = false;
		document.getElementById("run").value = "start";
		clearTimeout(t);
		timer_is_on=0;
	}
}


function timedCount() {
	
	if(c==4) {
		c = 0;
	}
	
	document.getElementById('hour').value=c;
	slider.setValue(c);
	c++;
	t=setTimeout("timedCount()",1000);
}


function setUsersTracksData() {
	var p = document.getElementById('userstracks');
	
	
	while (p.hasChildNodes()) {
        p.removeChild(p.firstChild);
    }
	
	var users = "# Users = "+ n_users[slider.value];
	var tracks = "# Tracks = "+n_tracks[slider.value];
	p.appendChild(document.createTextNode(users));
	p.appendChild(document.createElement('br'));
	p.appendChild(document.createTextNode(tracks));
}

function missingImg(element) {
	element.style.display="none";
	var p = document.getElementById('userstracks');
	
	if(slider.value < 4)
		slider.setValue(slider.value + 1);
	
	while (p.hasChildNodes()) {
        p.removeChild(p.firstChild);
    }
	p.appendChild(document.createTextNode("No data for time time interval!"));
}
